<template>
	<view style="padding: 16px 16px 0 16px;">
			<view class="balance_box">
				<view class="title">账户余额(元)</view>
				<view class="rule_box" @tap="showRule">规则说明</view>
				<view style="display: flex;justify-content: space-between;">
					<view class="balanceNum">{{account_balance||0}}</view>
					<view class="takeout" @tap="goto_balance">去提现</view>
				</view>
				<view style="display: flex;margin-top: 10px;">
					<view class="title" style="margin-right: 32px;">昨日奖励 <span style="margin-left: 10px;color: #333333;">+ {{yesterday_active|| 0}}</span></view>
					<view class="title">累计奖励 <span style="margin-left: 10px;color: #333333;">+{{cumulative||0}}</span></view>
				</view>
			</view>
			<view class="account_detail">
				<view class="head_tab">
					<view v-for="(item,index) in tabList" :key="index" :class="index == TabCur ? 'cur' : ''" @tap="tabSelect(index)">
						{{item}}
					</view>
				</view>
				<view v-if="TabCur==0">
					<view v-for="(item,index) in recommendation_list" :key="index" style="display: flex;border-bottom: 1px solid #EEEEEE;padding: 16px 0;">
						<view><image :src="item.avatar" mode="" style="width: 42px;height: 42px;border-radius: 21px;"></image></view>
						<view style="width: 100%;display: flex;justify-content: space-between;">
							<view style="margin-left: 16px;">
								<view class="username">{{item.username}}</view>
								<view class="add_time">{{item.updated_at}}</view>
							</view>
							<view class="money">+{{item.amount}}</view>
						</view>
					</view>
				</view>
				<view v-if="TabCur==1">
					<view v-for="(item,index) in cashList" :key="index" style="display: flex;border-bottom: 1px solid #EEEEEE;padding: 12px 0;" @tap="toDetail(item.recruit_account_log_id)">
						<view style="width: 100%;display: flex;justify-content: space-between;">
							<view>
								<view style="font-size: 15px;font-weight: bold;margin-bottom: 13px;">余额提现</view>
								<view class="add_time">{{item.created_at}}</view>
							</view>
							<view style="text-align: right;">
								<view v-if="item.step=='1'" class="text-yellow status">{{item.step | getstatus}}</view>
								<view v-if="item.step=='0'" class="text-red status">{{item.step | getstatus}}</view>
								<view v-if="item.step=='2'" class="text-red status">{{item.step | getstatus}}</view>
								<view class="money">- {{item.amount}}</view>
							</view>							
						</view>
					</view>
				</view>
			</view>
		</view>
</template>

<script>
	const Page = require('../../utils/mtj-wx-sdk.js').Page;
	import {get_in_account, invite_in_account } from "../../api/user.js"
export default {
  props: {
   
    
  },
  data() {
  	return {
		TabCur:0,
  		tabList:["推荐费明细","提现明细"],
		account_balance:"",
		yesterday_active:"",
		cumulative:"",
		recommendation_list: [
			// {url:"../../static/img/mine_invite/houzi.png",username:"无敌小洁", money:"100.00",add_time:"2020-12-21 08:30"},
			// {url:"../../static/img/mine_invite/houzi.png",username:"无敌小洁", money:"100.00",add_time:"2020-12-21 08:30"},
			// {url:"../../static/img/mine_invite/houzi.png",username:"无敌小洁", money:"100.00",add_time:"2020-12-21 08:30"},
			// {url:"../../static/img/mine_invite/houzi.png",username:"无敌小洁", money:"100.00",add_time:"2020-12-21 08:30"},
			// {url:"../../static/img/mine_invite/houzi.png",username:"无敌小洁", money:"100.00",add_time:"2020-12-21 08:30"},	
		],
		cashList:[
			// {type:"余额提现",status:"提现成功",add_time:"2020-12-21 08:30",money:"100.00"},
			// {type:"余额提现",status:"提现成功",add_time:"2020-12-21 08:30",money:"100.00"},
			// {type:"余额提现",status:"提现失败",add_time:"2020-12-21 08:30",money:"100.00"},
			// {type:"余额提现",status:"提现失败",add_time:"2020-12-21 08:30",money:"100.00"},
			// {type:"余额提现",status:"提现成功",add_time:"2020-12-21 08:30",money:"100.00"}
		]
  	}
  },
  methods:{
	tabSelect(val){
		this.TabCur = val
	},
	showRule(){
		let content = '1.推荐费只能提现到您当前所使用的微信零钱中。\r\n2.提现时您所使用的微信需要进行过实名认证'
		uni.showModal({
			title: '规则说明',
			content: content,
			showCancel: false,
			cancelText: '',
			confirmText: '确定',
			success: res => {},
			fail: () => {},
			complete: () => {}
		});
	},
	goto_balance(){
		uni.navigateTo({
			url:`/pages/mineBalance/withdraw?account_balance=${this.account_balance}`
		})
	},
	get_cashList(){
		get_in_account().then(res=>{
			this.cashList= res.data
			console.log(this.cashList)
		}),
		invite_in_account().then(res=>{
			this.recommendation_list = res.data
		})
	},
	toDetail(id){
		uni.navigateTo({
			url:`/pages/withdraw_details/withdraw_details?id=${id}`
		})
	},
	get_mine_account(){
			  if(this.token = uni.getStorageSync('authorization')){
				  get_account().then(res=>{
					this.account_balance = res.data.amount
					this.cumulative = res.data.cumulative
					this.yesterday_active = res.data.yesterday_active				  
				  })
			  }else {
				uni.showModal({
					title: "职小侠提醒",
					content: '用户已登出，请重新登录！',
					success: (res) => {
						if (res.confirm) {
							// let showT = true
							uni.navigateTo({
								url: "/pages/login/index"
							});
						}
					}
				})
				return;  
			  }
	},
  },
  onLoad(option) {
	this.get_cashList()
	if(option.account_balance||option.cumulative||option.yesterday_active) {
		this.account_balance = option.account_balance
		this.cumulative = option.cumulative
		this.yesterday_active = option.yesterday_active
	}else {
		this.get_mine_account()
	}
  	
  },
  filters: {
  	getstatus(val){
		if(val==0) {
			return "提现失败"
		}else if(val==1){
			return "提现成功"
		}else if(val ==2){
			return "进行中"
		}
	}
  }
};

</script>

<style  scoped>
	.balance_box {
		position: relative;
		background-color: #FFFFFF;
		border-radius: 8px;
		padding: 16px;
	}
	.rule_box {
		position: absolute;
		top: 0;
		right: 0;
		height: 24px;
		width: 68px;
		border-radius: 0px 8px 0px 8px;
		background-color: #0AC770;
		font-size: 12px;
		color: #FFFFFF;
		text-align: center;
		line-height: 24px;
	}
	.takeout {
		width: 56px;
		height: 24px;
		background: #FFFFFF;
		border: 1px solid #0AC770;
		opacity: 1;
		border-radius: 4px;
		color: #0AC770;
		font-size: 12px;
		line-height: 24px;
		text-align: center;
	}
	.balanceNum {	
		font-size: 30px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 42px;
		color: #333333;
		opacity: 1;
	}
	.title {
		color: #999999;
		font-size: 13px;
	}
	.account_detail {
		background-color: #FFFFFF;
		margin-top: 16px;
		border-radius: 8px;
		padding: 16px;
	}
	.head_tab {
		display: flex;
		justify-content: space-around;
		font-size: 15px;
		margin-bottom: 8px;
	}
	.cur {
		color: #0AC770;
	}
	.username {
		fomt-size:15px;
		color: #333333;
		margin-bottom: 10px;
		font-weight: bold;
		font-family: PingFang SC;
	}
	.add_time {
		font-size: 13px;
		color: #666666;
	}
	.money {
		font-size: 18px;
		color: #333333;
		font-weight: bold;
		font-family: DIN;
	}
	.status {
		font-size: 13px;
		margin-bottom: 13px;
	}
</style>
